<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="listQuery.user"
        placeholder="用户名"
        style="width: 200px; margin-right: 10px"
        class="filter-item"
        clearable
        @keyup.enter.native="event_getAll"
      />
      <el-select
        v-model="listQuery.state"
        placeholder="用户状态"
        clearable
        class="filter-item"
        style="width: 120px; margin-right: 10px"
      >
        <el-option
          v-for="item in state"
          :key="item.key"
          :label="item.msg"
          :value="item.index"
        />
      </el-select>
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="event_getAll"
      >
        查询
      </el-button>
    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      stripe
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column label="用户ID" prop="uid" align="center" width="80">
        <template slot-scope="{ row }">
          <span>{{ row.uid }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="用户名"
        min-width="150px"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="{ row }">
          <span>{{ row.user }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="状态"
        class-name="status-col"
        align="center"
        width="95"
      >
        <template slot-scope="{ row }">
          <el-switch
            :value="row.state == 1"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="event_edit(row)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="时间" width="100" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.time | parseTime("{y}-{m}-{d}") }}</span>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="event_getAll"
    />
  </div>
</template>

<script>
import waves from "@/directive/waves"; // waves directive
import { parseTime } from "@/utils";
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import { getAll, edit, get } from "@/network/user.js";
import { Message } from "element-ui";

export default {
  name: "ComplexTable",
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      page: 1,
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 30,
        user: "",
        state: "",
      },
      state: [
        { index: 1, msg: "正常使用", key: "state_ok" },
        { index: 2, msg: "禁止使用", key: "state_no" },
      ],
      dialogPvVisible: false,
      pvData: [],
      rules: {},
      downloadLoading: false,
    };
  },
  created() {
    this.event_getAll();
  },
  methods: {
    event_edit(row) {
      //修改用户状态
      ////console.log(row);
      let state = row.state == 1 ? 2 : 1;
      edit({ uid: row.uid, state: state })
        .then((response) => {
          let res = response.data;
          if (res.code == 200) {
            row.state = state;
            Message.success({ message: res.msg, duration: 1000, offset: 200 });
          } else {
            Message.error({ message: res.msg, duration: 1000, offset: 200 });
          }
        })
        .catch((error) => {
          Message.error({ message: "网络异常", offset: 200 });
          return false;
        });
    },
    event_getAll() {
      //获取用户列表
      ////console.log(this.listQuery);
      if (this.listQuery.page > 1 && this.list.length < this.listQuery.limit) {
        this.listQuery.page = this.page;
        Message.error({
          message: "别点了已经没有了",
          duration: 1000,
          offset: 200,
        });
        return;
      }
      this.page = this.listQuery.page;
      this.listLoading = true;
      getAll(this.listQuery)
        .then((response) => {
          let res = response.data;
          if (res.code == 200) {
            this.list = res.data;
            this.total = res.count;
            Message.success({ message: res.msg, duration: 1000, offset: 200 });
          } else {
            Message.error({ message: res.msg, duration: 1000, offset: 200 });
          }
          this.listLoading = false;
        })
        .catch((error) => {
          Message.error({ message: "网络异常", offset: 200 });
          return false;
        });
    },
    event_query() {
      //查询事件
      this.listQuery.page = 1;
      this.event_getAll();
    },
  },
};
</script>
